<template>
	<view>
		<!-- 新建项目按钮 -->
		<view style="flex-direction: column;display: flex;margin:10px 15px;">
			<!-- 添加项目按钮 -->
			<view style="margin: 0px 0px 0px 0px;" @click="addJobProject">
				<view style="justify-content: center;align-items:center;display: flex;padding: 20px 10px;height: 30px;border: solid 1rpx #dadada;border-radius: 5px;">
					<u-icon name="plus" size="18" :customStyle="{paddingRight:'3px'}"></u-icon> 添加项目
				</view>
			</view>
		</view>
		
		<view style="margin:10px 15px;">
			<view v-for="(project,projectIndex) in workJobs">
				<!-- 兼职卡片 -->
				<view style="box-shadow:rgb(146 146 146 / 25%) 0px 1px 4px 0px;;background-color: #fff;border-radius: 10rpx;padding:5px 0;margin:20rpx 0rpx">
					<view style="display: flex;justify-content: space-between;padding: 20rpx;">
						<!-- 左排 -->
						<view style="display: flex;justify-content: space-between;flex-direction: column;">
							<view style="font-size: 32rpx;margin-bottom: 10rpx;">
								{{project.title}}
							</view>
							<view style="display: flex;align-items: center;">
								<span style="
								font-size: 24rpx; 
								color:#b6b6b6;"
								>广东掌聘人力资源有限公司</span>
								<span style="
									background-color: #fff6c7;
									border-radius: 100rpx;
									padding: 6rpx 20rpx;
									margin-left: 14rpx;
									text-align: center;
									color: #ff8725;
									font-size: 20rpx;
									">企业认证</span>
							</view>
						</view>
						
						<!-- 右排 -->
						<view style="position: relative;flex: 0 0 15%;">
							<view style="text-align: center">
								<span style="font-size: 18rpx;color:#9c9c9c;">前天</span>
							</view>
							<view style="position: absolute;top: 50%;right: 0;">
								<view @click="onConfirm" class="cu-btn round" style="
										display: flex;
										border-radius: 250px;
										font-size: 28rpx;
										background-color: #ff8725;
										color: white;
										height: 56rpx;
										width: 150rpx;
									">
									排班
								</view>
							</view>
						</view>
					</view>
					
					<!-- 班次时间 -->
					<view style="">
						<view v-for="(item,index) in project.jobs" style="margin: 0px;border-top: solid 1rpx #e2e2e2;padding: 5px 10px;display: flex;justify-content: space-between;align-items: center;">
							<view style="flex:0 0 30%;font-size: 13px;">{{item.name}}</view>
							<view style="flex:0 0 32%;font-size: 14px;">{{item.time}}</view>
							<view>
								<span style="flex:0 0 40%;font-size: 30rpx;color: #f00;">{{item.price}}/{{priceType[0][item.price_type - 1]}}</span> | <span style="font-size: 24rpx;color: #9c9c9c;">{{item.settle_type}}</span> | <span style="font-size: 24rpx;color: #9c9c9c;">{{item.num}}人</span>
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import workData from '../job-manager/workData.js'
	
	export default {
		mixins:[workData],
		data() {
			return {
				workJobs:[
					{
						name:'西餐厅服务员',
						price: '16',
						price_type:'小时',
						settle_type:'日结',
						num:'9人',
						time:'10:00 - 15:00',
						start_time:'18:00',
						end_time:'22:00'
					},
					{
						name:'中餐厅服务员',
						price: '18',
						price_type:'小时',
						settle_type:'日结',
						num:'9人',
						time:'15:00 - 18:00',
						start_time:'18:00',
						end_time:'22:00'
					},
					{
						name:'客房',
						price: '17',
						price_type:'小时',
						settle_type:'日结',
						num:'9人',
						time:'18:00 - 22:00',
						start_time:'18:00',
						end_time:'22:00'
					}
				],
			}
		},
		beforeCreate(){
			let that = this
			this.$http.get('/job/task/template/list').then((res)=>{
				that.workJobs = res.data
				console.log(that.workJobs)
			})
		},
		methods: {
			onConfirm(){
				
			},
			addJobProject(){
				uni.navigateTo({
					url:'/pages/job/publish/publish-form'
				})
			}
		}
	}
</script>

<style>

</style>
